<template>
  <div class="script-manager">
    <div class="script-header">
      <div class="search-filters">
        <el-input
          v-model="searchQuery"
          placeholder="搜索剧本"
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select v-model="scriptType" placeholder="剧本类型" class="type-select">
          <el-option label="全部" value="" />
          <el-option label="电影" value="movie" />
          <el-option label="电视剧" value="tv" />
          <el-option label="话剧" value="drama" />
        </el-select>
      </div>
    </div>

    <div class="script-grid">
      <el-card v-for="script in filteredScripts" :key="script.id" class="script-card">
        <template #header>
          <div class="card-header">
            <span>{{ script.title }}</span>
            <el-dropdown>
              <el-icon><More /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="editScript(script)">编辑</el-dropdown-item>
                  <el-dropdown-item @click="deleteScript(script)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <div class="script-info">
          <p class="type">{{ script.type }}</p>
          <p class="description">{{ script.description }}</p>
          <div class="meta">
            <span>创建时间：{{ script.createTime }}</span>
            <span>最后修改：{{ script.updateTime }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 新建剧本对话框 -->
    <el-dialog
      v-model="createDialogVisible"
      title="新建剧本"
      width="500px"
    >
      <el-form :model="newScript" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="newScript.title" placeholder="请输入剧本标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="newScript.type" placeholder="请选择剧本类型">
            <el-option label="电影" value="movie" />
            <el-option label="电视剧" value="tv" />
            <el-option label="话剧" value="drama" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="newScript.description"
            type="textarea"
            :rows="3"
            placeholder="请输入剧本描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="createScript">创建</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, More } from '@element-plus/icons-vue'

const searchQuery = ref('')
const scriptType = ref('')
const createDialogVisible = ref(false)
const newScript = ref({
  title: '',
  type: '',
  description: ''
})

// 模拟剧本数据
const scripts = ref([
  {
    id: 1,
    title: '都市爱情故事',
    type: '电影',
    description: '一个关于都市男女的爱情故事...',
    createTime: '2024-03-20',
    updateTime: '2024-03-21'
  },
  {
    id: 2,
    title: '悬疑推理剧',
    type: '电视剧',
    description: '一部扣人心弦的悬疑推理剧...',
    createTime: '2024-03-19',
    updateTime: '2024-03-20'
  }
])

// 过滤后的剧本列表
const filteredScripts = computed(() => {
  return scripts.value.filter(script => {
    const matchQuery = script.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                      script.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchType = !scriptType.value || script.type === scriptType.value
    return matchQuery && matchType
  })
})

const showCreateDialog = () => {
  createDialogVisible.value = true
  newScript.value = {
    title: '',
    type: '',
    description: ''
  }
}

const createScript = () => {
  if (!newScript.value.title || !newScript.value.type) {
    ElMessage.warning('请填写必要信息')
    return
  }

  scripts.value.push({
    id: scripts.value.length + 1,
    ...newScript.value,
    createTime: new Date().toLocaleDateString(),
    updateTime: new Date().toLocaleDateString()
  })

  createDialogVisible.value = false
  ElMessage.success('创建成功')
}

const editScript = (script) => {
  // TODO: 实现编辑功能
  ElMessage.info('编辑功能开发中')
}

const deleteScript = (script) => {
  ElMessageBox.confirm('确定要删除这个剧本吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = scripts.value.findIndex(s => s.id === script.id)
    if (index > -1) {
      scripts.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}
</script>

<style scoped>
.script-manager {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.script-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.search-filters {
  display: flex;
  gap: 16px;
}

.search-input {
  width: 300px;
}

.type-select {
  width: 120px;
}

.script-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  overflow-y: auto;
}

.script-card {
  cursor: pointer;
  transition: all 0.3s;
}

.script-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.script-info {
  .type {
    color: #409EFF;
    margin: 0 0 8px 0;
  }

  .description {
    color: #606266;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .meta {
    display: flex;
    justify-content: space-between;
    color: #909399;
    font-size: 12px;
  }
}
</style> 